<template>
  <div id="skill_index_menu">
    <div class="menu">
      <div class="tab">
        <!--        <div v-if="1===chosen" class="green-line"></div>-->
        <div  class="tab-in" @click="clickType('computer',1)">
          <span :class="{ch: 1===chosen}">电脑使用</span>
        </div>
        <div class="un-point"></div>
        <div v-if="1===chosen" class="point"></div>
      </div>
      <div class="tab">
        <!--        <div v-if="2===chosen" class="green-line"></div>-->
        <div class="tab-in" @click="clickType('code',2)">
          <span :class="{ch: 2===chosen}">编程学习</span>
        </div>
        <div class="un-point"></div>
        <div v-if="2===chosen" class="point"></div>
      </div>
      <div class="tab">
        <!--        <div v-if="3===chosen" class="green-line"></div>-->
        <div  class="tab-in" @click="clickType('life',3)">
          <span :class="{ch: 3===chosen}">健康生活</span>
        </div>
        <div class="un-point"></div>
        <div v-if="3===chosen" class="point"></div>
      </div>
      <div class="tab">
        <!--        <div v-if="4===chosen" class="green-line"></div>-->
        <div  class="tab-in" @click="clickType('beauty',4)">
          <span :class="{ch: 4===chosen}">美妆护肤</span>
        </div>
        <div class="un-point"></div>
        <div v-if="4===chosen" class="point"></div>
      </div>
      <div class="tab">
        <!--        <div v-if="5===chosen" class="green-line"></div>-->
        <div  class="tab-in" @click="clickType('money',5)">
          <span :class="{ch: 5===chosen}">投资理财</span>
        </div>
        <div class="un-point"></div>
        <div v-if="5===chosen" class="point"></div>
      </div>
    </div>
<!--    <IndexStatis style="width: 200px; position: absolute; left: 0; margin-top: 30px"></IndexStatis>-->
  </div>
</template>

<script>
import IndexStatis from "./index_statis";
export default {
  name: "index_menu",
  components: {
    IndexStatis
  },
  data() {
    return {
      type:'',
      chosen: 0
    }
  },
  methods: {
    clickType(data,c) {
      this.$emit("getType",data);
      this.chosen = c;
    }
  }
}
</script>

<style lang="scss" >
@media screen and ( max-width: 1200px ){
  #skill_index_menu {
    display: none;
  }
}
#skill_index_menu {
  //position: fixed;
  box-sizing: border-box;
  padding-top: 80px;
  margin-left: 210px;
  margin-right: 50px;
  width: 160px;
  height: 100%;
  background-color: rgba(0,0,0,0);
  .menu {
    background-color: rgba(0,0,0,0);
    box-sizing: border-box;
    padding: 20px 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-right: 5px white solid;
    .tab {
      position: relative;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      height: 100px;
      width: 100%;
      padding: 10px 0;
      background-color: rgba(0,0,0,0);
      color: white;
      font-size: 24px;
      font-weight: 600;
      .green-line{
        width: 8px;
        height: 30px;
        background-color: #58c15e;
        margin-right: 10px;
      }
      .point {
        position: absolute;
        width: 12px;
        height: 12px;
        right: -14px;
        text-align: center;
        line-height: 22px;
        margin: 0 auto;
        background-color: #b0b0b0;
        border-radius: 50%;
        border: 5px solid white;
        transition: 0.5s;
      }
      .un-point {
        position: absolute;
        width: 22px;
        height: 22px;
        right: -14px;
        border-radius: 11px;
        background-color: #fff;
      }
      .tab-in{
        height: 100%;
        line-height: 80px;
        cursor: pointer;
        &:hover {
          color: #6fcb73;
        }
      }
      .ch {
        color: #6fcb73;
      }
      &:last-child{
        border-bottom: 0;
      }

    }
  }
}
</style>
